<!--
 * @lastUpdateBy : 张瀚
 * @description: 图片预览工具，鼠标移入时，放大图片预览
-->
<template>
  <div>
    <img class="main" :src="src" :alt="alt" @click.stop="showBigger = true" :title="title" v-if="src">
    <div v-if="showBigger" class="bigger" @click.stop="showBigger = false">
      <img :src="src" :alt="alt" :title="biggerTitle">
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    src: {
      type: String,
      default: undefined
    },
    alt: {
      type: String,
      default: undefined
    },
    title: {
      type: String,
      default: "点击查看预览大图"
    },
    biggerTitle: {
      type: String,
      default: "点击关闭预览"
    }
  },
  data() {
    return {
      showBigger: false,
    }
  },
  created() { },
  mounted() { },
  destroyed() { },
  computed: {},
  watch: {},
  methods: {},
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.bigger {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
}
.bigger > img {
  max-width: 80%;
  max-height: 80%;
  min-width: 40%;
  min-height: 40%;
  border: black solid 5px;
  border-radius: 20px;
  cursor: pointer;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
</style>
